<template>
  <div class="pagerClass">
    <span class="el-icon-d-arrow-left leftMargin10" @click="NextNext"></span>
    <span class="el-icon-arrow-left leftMargin10" @click="Next"></span>
    <vxe-input v-model="customValue" style="width: 40px;" size="mini" class="customPage" @blur="inputBlur"></vxe-input>
    <span class="leftMargin10">/ {{totalPage}}</span>
    <span class="el-icon-arrow-right leftMargin10" @click="Pre"></span>
    <span class="el-icon-d-arrow-right leftMargin10" @click="PrePre"></span>
    <vxe-select v-model="sizeValue" placeholder="默认尺寸" @change="itemClick" style="width: 90px;" size="mini">
      <vxe-option v-for="num in Sizes" :key="num" :value="num" :label="`${num}条/页`"></vxe-option>
    </vxe-select>
  </div>
</template>

<script>
  export default {
    name: "vPager",
    props: {
      total: {
        type: [Number, String],
        default: function () {
          return 11
        }
      },
      pageSize: {
        type: [Number, String],
        default: function () {
          return 10
        }
      },
      Sizes: {
        type: Array,
        default: function () {
          return [10, 20, 30, 40, 50]
        }
      },
      customPage: {
        type: [Number, String],
        default: function () {
          return 1
        }
      }
    },
    computed: {
      totalPage () {
        return Math.ceil(Number(this.total / this.pageSize))
      },
      // customValue: {
      //   get: function () {
      //     return this.customPage
      //   },
      //   set: function (val) {
      //     if (1 < val < this.totalPage) {
      //       this.$emit('jumpPage', val)
      //     } else {
      //       this.$emit('jumpPage', 1)
      //     }
      //   }
      // }
    },
    data () {
      return {
        sizeValue: this.pageSize,
        visible: false,
        customValue: this.customPage
      }
    },
    methods: {
      // 输入页码
      inputBlur () {
        if (isNaN(Number(this.customValue))) {
          this.customValue = 1
          this.$emit('jumpPage', 1)
        } else {
          if (1 < Number(this.customValue) < Number(this.totalPage)) {
            this.$emit('jumpPage', this.customValue)
          } else {
            this.customValue = 1
            this.$emit('jumpPage', 1)
          }
        }
      },
      // 回到首页
      NextNext () {
        if (Number(this.customPage) > 1) {
          this.$emit('jumpPage', 1)
        }
      },
      // 返回上一页
      Next () {
        if (Number(this.customPage) > 1) {
          this.$emit('jumpPage', Number(this.customPage) - 1)
        }
      },
      // 到最后一页
      PrePre () {
        if (Number(this.customPage) < this.totalPage) {
          this.$emit('jumpPage', this.totalPage)
        }
      },
      // 下一页
      Pre () {
        if (Number(this.customPage )< this.totalPage) {
          this.$emit('jumpPage', Number(this.customPage) + 1)
        }
      },
      itemClick ({ value }) {
        this.visible = false
        this.$emit('sizeChange', value)
      }
    },
    watch: {
      customPage (n, o) {
        this.customValue = n
      }
    }
  }
</script>

<style>
  .leftMargin10 {
    margin: 0 10px 0 0;
  }
  .leftMargin10:hover{
    cursor: pointer;
  }
  .page-item {
    min-width: 80px !important;
    padding: 10px 0 !important;
  }
  .page-item .item {
    text-align: center;
    font-size: 16px;
  }
  .page-item .item:hover {
    background-color: #cccccc;
    cursor: pointer;
  }
  .pagerClass {
    padding: 5px 0;
  }
  .showCustomePageTotal {
    cursor: pointer;
  }
  .customPage input{
    text-align: center;
  }
</style>
